<nz-card  [nzBordered]="false">
    <form nz-form (ngSubmit)="search()" [nzLayout]="'inline'">
        <div nz-row  [nzType]="'flex'" [nzJustify]="'start'" [nzGutter]="24">
            <div  nz-col [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label><label>配置类型</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-select style="width:100%" nzAllowClear [(ngModel)]="appConfigitem.configType"  name="configType" [nzSize]="'large'" [nzPlaceHolder]="'配置类型'" nzId="configType">
                            <nz-option  *ngFor="let i of configType;" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label><label>配置名</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-input [(ngModel)]="appConfigitem.configName" name="configName" [nzSize]="'large'" [nzPlaceHolder]="'配置名'" nzId="configName"></nz-input>
                    </div>
                </div>
            </div>
  <!--          <div *ngIf="expandForm" nz-col [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label><label>配置值字典</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-select style="width:100%" [(ngModel)]="appConfigitem.configDict"  name="configDict" [nzSize]="'large'" [nzPlaceHolder]="'配置值字典'" nzId="configDict">
                            <nz-option  *ngFor="let i of configDict;" [nzLabel]="i.value" [nzValue]="i.key"></nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>-->
            <div *ngIf="expandForm" nz-col [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label><label>配置风格</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-select style="width:100%" [(ngModel)]="appConfigitem.configStyle" nzAllowClear  name="configStyle" [nzSize]="'large'" [nzPlaceHolder]="'配置风格'" nzId="configStyle">
                            <nz-option  *ngFor="let i of configStyle;" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>
            <div *ngIf="expandForm" nz-col [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label><label>是否启用</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-select style="width:100%" [(ngModel)]="appConfigitem.enabled" nzAllowClear  name="enabled" [nzSize]="'large'" [nzPlaceHolder]="'是否启用'" nzId="enabled">
                            <nz-option  *ngFor="let i of isopen;" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="expandForm ? 24 : 8" class="mb-md" [class.text-right]="expandForm">
                <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading" [nzSize]="'large'">查询</button>
                <button nz-button type="reset" (click)="reset()" [nzSize]="'large'" class="mx-sm">重置</button>
                <a (click)="expandForm=!expandForm">
                    {{expandForm ? '收起' : '展开'}}
                    <i class="anticon" [class.anticon-down]="!expandForm" [class.anticon-up]="expandForm"></i>
                </a>
            </div>
        </div>
    </form>
    <app-list #child
              [initDate]="data"
              (addCreat)="addHandler($event)"
              [selectedRows]="selectedRows"
              (pageNumber)="monitorHandler($event)"
              (deleatData)="deleatData($event)"
              [configTitle]="configTitle"
              [pageindex]='appConfigitem.pi'
              (deleteBatch)="configbatchDel($event)"
              (buttonEvent)="buttonEvent($event)"
              [headerDate]="headerData"
              [loading]="loading"
              [buttons]="buttons"
              [total]="total"></app-list>
</nz-card>

<!--新增个性化配置弹出框-->
<nz-modal [nzVisible]="modalVisible" [nzMaskClosable]="false"  [nzWidth]="1024" [nzTitle]="configAppTitle"  [nzConfirmLoading]="loading" [nzContent]="modaleContent"
          [nzFooter]="modalFooter" (nzOnCancel)="modalVisible = false">
    <ng-template #modaleContent>
        <form novalidate  (ngSubmit)="save(f)"  #f="ngForm" >
            <div nz-row  [nzType]="'flex'" [nzJustify]="'end'" [nzGutter]="24">
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>配置类型</label><span [ngClass]="{'fromErrors':config.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-select style="width:100%" [(ngModel)]="appConfigAdd.configType" nzAllowClear #config="ngModel"  required name="configType"  [nzSize]="'large'" [nzPlaceHolder]="'配置类型'" nzId="configType">
                                <nz-option  *ngFor="let i of configType;" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                    <div *ngIf="config.errors?.required && config.touched" nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须选择配置类型
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">配置名</label><span [ngClass]="{'fromErrors':names.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="appConfigAdd.configName" name="configName" #names="ngModel"  required [nzSize]="'large'" [nzPlaceHolder]="'配置名'" nzId="configName"></nz-input>
                        </div>
                    </div>
                    <div *ngIf="names.errors?.required && names.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须选择配置名
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="isopen">配置值字典</label><span [ngClass]="{'fromErrors':configdict.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-select style="width:100%"
                                       [(ngModel)]="appConfigAdd.configDict"
                                       nzShowSearch #configdict="ngModel" nzAllowClear
                                       (ngModelChange)="checkSelect(appConfigAdd.configDict)"
                                       required name="configDict" [nzSize]="'large'"
                                       [nzPlaceHolder]="'配置值字典'" nzId="configDict">
                                <nz-option  *ngFor="let i of configDict;" [nzLabel]="i.dictKey + i.dictName" [nzValue]="i.guid"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                    <div *ngIf="configdict.errors?.required && configdict.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须选择配置值字典
                    </div>
                </div>
               <!-- <div  nz-col [nzSpan]="24"  class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>配置风格</label><span [ngClass]="{'fromErrors':styleConfig.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-select style="width:100%" [(ngModel)]="appConfigAdd.configStyle" required #styleConfig="ngModel" name="configStyle" [nzSize]="'large'" [nzPlaceHolder]="'配置风格'" nzId="configStyle">
                                <nz-option  *ngFor="let i of configStyle;" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                    <div *ngIf="styleConfig.errors?.required && styleConfig.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须选择一个配置风格
                    </div>
                </div>-->
                <div nz-col [nzSpan]="24" class="mb-md" *ngIf="appConfigAdd.configDict">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>默认配置值</label></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-select style="width:100%" [(ngModel)]="appConfigAdd.configValue" nzAllowClear  name="configValue" nzShowSearch
                                       nzAllowClear
                                       [nzSize]="'large'" required  [nzPlaceHolder]="'默认配置值'" nzId="configValue">
                                <nz-option *ngFor="let i of configValue" [nzLabel]="i.itemValue + i.itemName" [nzValue]="i.guid"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                </div>
                <div  nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>是否启用</label><span [ngClass]="{'fromErrors':open.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-select style="width:100%" [(ngModel)]="appConfigAdd.isopen" nzAllowClear required name="isopen" #open="ngModel" [nzSize]="'large'" [nzPlaceHolder]="'是否启用'" nzId="isopen">
                                <nz-option  *ngFor="let i of isopen;" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                    <div *ngIf="open.errors?.required && open.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须选择是否启用
                    </div>
                </div>
             <!--   <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="displayOrder">显示顺序</label></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="appConfigAdd.displayOrder"  name="displayOrder"  [nzSize]="'large'" [nzPlaceHolder]="'显示顺序'" nzId="displayOrder"></nz-input>
                        </div>
                    </div>
                </div>-->
                <div  nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="sqlFilter">配置描述</label></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="appConfigAdd.configDesc"   nzAutosize=true nzType="textarea" name="configDesc" [nzSize]="'large'" [nzPlaceHolder]="'配置描述说明'" nzId="configDesc"></nz-input>
                        </div>
                    </div>
                </div>
            </div>
           <div nz-row>
               <div nz-col [nzSpan]="6" [nzOffset]="19">
                   <button style="margin-right: 16%" nz-button [nzType]="'default'" [nzSize]="'large'" (click)="modalVisible = false">
                       取 消
                   </button>
                   <button nz-button type="submit" [nzType]="'primary'" [nzSize]="'large'" [disabled]="f.invalid"  [nzLoading]="isConfirmLoading">
                       提 交
                   </button>
               </div>
           </div>
        </form>
    </ng-template>
    <ng-template #modalFooter></ng-template>
</nz-modal>



